<template>
  <el-container>
    <el-header height="45px">
      <div
        class="config-tab"
        :class="{ active: configTab == 'widget' }"
        @click="handleConfigSelect('widget')"
      >
        {{ $t('fm.config.widget.title') }}
      </div>
      <div
        class="config-tab"
        :class="{ active: configTab == 'form' }"
        @click="handleConfigSelect('form')"
      >
        {{ $t('fm.config.form.title') }}
      </div>
    </el-header>
    <el-main class="config-content">
      <widget-config v-show="configTab == 'widget'" :data="select" />
      <form-config v-show="configTab == 'form'" :data="config" />
    </el-main>
  </el-container>
</template>

<script>
import WidgetConfig from '../WidgetConfig'
import FormConfig from '../FormConfig'

export default {
  components: {
    WidgetConfig,
    FormConfig,
  },
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          labelWidth: 100,
          labelPosition: 'right',
          size: 'small',
          customClass: '',
        }
      },
    },
    select: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      // widgetFormSelect: null,
      configTab: 'form',
    }
  },
  methods: {
    handleConfigSelect(value) {
      this.configTab = value
    },
  },
}
</script>

<style lang="scss" scoped></style>
